<!-- 
  列表顶部组件
    包含新增、查找、切换
 -->
<template>
	<div class="alike-lis-header">
		<div class="lis-header-left">
			<!-- 新增按钮 -->
			<div class="add-btn" @click="$router.push({ path: `${$route.fullPath}/detail` })">+ {{ addText || "新增" }}</div>

			<!-- 卡片/表格 切换按钮 -->
			<div class="btns-switch">
				<div @click="changeIsCard(true)">
					<img src="@/assets/img/List_card.png" v-if="isCard" />
					<img src="@/assets/img/list_nocard.png" v-else />
				</div>
				<div @click="changeIsCard(false)">
					<img src="@/assets/img/list_nolist.png" v-if="isCard" />
					<img src="@/assets/img/list_list.png" v-else />
				</div>
			</div>

			<!-- 搜索框 -->
			<div class="search-box">
				<el-input
					prefix-icon="el-icon-search"
					v-model="Pagedata.name"
					class="search"
					placeholder=""
					@input="searchChange"
				/>
			</div>
		</div>

		<div class="lis-header-right">
			<!-- 下拉菜单 -->
			<el-select size="mini" placeholder="请选择" v-model="showThisActive" @change="changeSelect">
				<el-option v-for="(item, index) in selectList" :key="index" :label="item" :value="index.toString()"></el-option>
			</el-select>
		</div>
	</div>
</template>

<script>
export default {
	props: [
		"isCard", // 是否是卡片列表
		"Pagedata", // 页数参数
		"searchChange", // 搜索框内容修改事件
		"selectList", // 下拉菜单列表
		"showThisActive", // 下拉菜单选中项
		"getData", // 获取数据方法
		"addText", // 新增按钮文本，非必填
	],
	data() {
		return {};
	},
	mounted() {},
	methods: {
		changeIsCard(val) {
			this.$emit("changeIsCard", val);
		},
		changeSelect() {
			this.$emit("changeSelect", this.showThisActive);
		},
	},
};
</script>

<style lang="less" scoped></style>
